<template>
    <div class="kaipin-details" :class="{ 'w375': fun.isPc() }">
        <c-title text="开品详情"></c-title>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item, i) in goods.main_images" :key="i"><img :src="item" alt="" /></van-swipe-item>
        </van-swipe>
        <div class="head">
            <div class="title">{{ goods.name }}</div>
            <div class="head-bottom">
                <div class="head-bottom-item">
                    <div>
                        <div class="number">{{ goods.total_amount }}</div>
                        <div class="text">总量</div>
                    </div>
                    <div>
                        <div class="number">¥{{ goods.price }}</div>
                        <div class="text">开品价格</div>
                    </div>
                </div>
                <div class="head-bottom-item">
                    <div>
                        <div class="number">¥{{ goods.total_price }}</div>
                        <div class="text">报名保证金</div>
                    </div>
                    <div>
                        <div class="number">{{ goods.number_applicants }}</div>
                        <div class="text">报名人数</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="flow">
            <div class="flow-head">
                <div class="flow-title">开品流程</div>
                <div @click="flow_flag = true">
                    <span class="explain">详情说明</span>
                    <i class="iconfont icon-icon_more11"></i>
                </div>
            </div>



            <template v-if="goods.old_status == 0 && goods.status == -1">
                <div class="flow-bottom" style="justify-content: space-between;">
                    <div class="flow-bottom-item">
                        <i class="iconfont icon-icon_select1">
                        </i>
                        <span class="flow-txt">待开品</span>
                    </div>
                    <div class="flow-line" style="width: 20rem;">
                    </div>
                    <div class="flow-bottom-item">
                        <i class="iconfont icon-icon_close"></i>
                        <span class="flow-txt">开品失败</span>
                    </div>
                </div>
            </template>
            <template v-else-if="goods.old_status == 1 && goods.status == -1">
                <div class="flow-bottom" style="justify-content: space-between;">
                    <div class="flow-bottom-item">
                        <i class="iconfont icon-icon_select1">
                        </i>
                        <span class="flow-txt">待开品</span>
                    </div>
                    <div class="flow-line" style="width: 5rem;"> </div>
                    <div class="flow-bottom-item">
                        <i class="iconfont icon-icon_select1"></i>
                        <span class="flow-txt">已开品</span>
                    </div>

                    <div class="flow-line" style="width: 5rem;"></div>
                    <div class="flow-bottom-item">
                        <i class="iconfont icon-icon_close"></i>
                        <span class="flow-txt">开品失败</span>
                    </div>
                </div>

            </template>
            <template v-else>
                <div class="flow-bottom">
                    <div class="flow-bottom-item">
                        <i class="iconfont icon-icon_select1">
                        </i>
                        <span class="flow-txt">待开品</span>
                    </div>
                    <div class="flow-line">
                        <span v-if="goods.status == 0">{{ goods.expect }}天</span>
                    </div>
                    <div class="flow-bottom-item">
                        <i v-if="goods.status >= 1 " class="iconfont icon-icon_select1">
                        </i>
                        <span v-else class="wait">2</span>
                        <span class="flow-txt">已开品</span>
                    </div>
                    <div class="flow-line flow-line-2">
                        <span v-if="goods.status == 1">{{ goods.ongoing }}天</span>
                    </div>
                    <div class="flow-bottom-item">
                        <i v-if="goods.status >= 2 " class="iconfont icon-icon_select1">
                        </i>
                        <span v-else class="wait">3</span>
                        <span class="flow-txt">出品中</span>
                    </div>
                    <div class="flow-line">
                        <span v-if="goods.status == 2">{{ goods.complete }}天</span>
                    </div>
                    <div class="flow-bottom-item">
                        <i v-if="goods.status >= 3" class="iconfont icon-icon_select1">
                        </i>
                        <i v-else-if="goods.status == -1" class="iconfont icon-icon_close"></i>
                        <span v-else class="wait">4</span>
                        <span class="flow-txt">{{ goods.status !== -1 ? '已完成' : '开品失败' }}</span>
                    </div>
                </div>
            </template>

        </div>
        <c-comment class="section" :commentInfo="goods.comment" :num="goods.comment_count"
            :rate="goods.positive_review_rate" v-on:RouterTo="FromTo"></c-comment>
        <div class="goods-details">
            <div class="goods-details-title">商品详情</div>
            <div v-html="goods.diy_copywriting"></div>
        </div>
        <van-goods-action :class="{ 'absoulte': fun.isPc() }">
            <van-goods-action-icon text="开品广场" @click="goto">
                <i slot="icon" class="iconfont icon-shangpin1"></i>
            </van-goods-action-icon>
            <van-goods-action-icon text="客服" @click="onClickIcon">
                <i slot="icon" class="iconfont icon-pinglun1"></i>
            </van-goods-action-icon>
            <van-goods-action-button type="danger"
                :color="goods.is_sign_up || goods.status >= 1 || goods.is_full  || goods.status == -1? '#AAAAB3' : '#F15353'"
                :text="goods.is_full?'报名总量已满':goods.is_sign_up ? '已参与' : goods.status >= 1 ? '报名结束' : '参与开品'" @click="onClickButton" />
        </van-goods-action>
        <van-popup v-model="flow_flag" round position="bottom" :style="{ height: '45%' }">
            <div class="popup-title">开品流程说明</div>
            <i class="iconfont icon-guanbi" @click="flow_flag = false"></i>
            <div class="popup-flow">
                <div class="popup-flow-status">待开品</div>
                <div class="popup-flow-tips">{{ goods.set && goods.set.explain }}</div>
            </div>
            <div class="popup-flow">
                <div class="popup-flow-status">已开品</div>
                <div class="popup-flow-tips">{{ goods.set && goods.set.explain_open }}</div>
            </div>
            <div class="popup-flow">
                <div class="popup-flow-status">出品中</div>
                <div class="popup-flow-tips">{{ goods.set && goods.set.explain_ing }}</div>
            </div>
            <div class="popup-flow">
                <div class="popup-flow-status">{{ goods.status !== -1 ? '已完成' : '开品失败' }}</div>
                <div class="popup-flow-tips">{{ goods.status !== -1 ? goods.set && goods.set.explain_end :
                    goods.set && goods.set.explain_fail }}</div>
            </div>
        </van-popup>
        <van-popup v-model="customer_flag" class="customer-box" :class="{'pc-style':fun.isPc()}">
            <div :class="{'center':fun.isPc()}">
                <div class="customer-popup">
                    <div class="customer-popup-title">联系客服</div>
                    <div class="customer-qr">
                        <img :src="goods.qr_images_url" />
                    </div>
                    <div class="customer-popup-tips">扫码添加</div>
                    <a :href="'tel:' + goods.tel" class="phone-button">
                        <i class="iconfont icon-zx_map_tel"></i>
                        拨打咨询热线
                    </a>
                </div>
                <div style="padding-top: 1.25rem;">
                    <i class="iconfont icon-adsystem_icon_cancle" @click="customer_flag = false"></i>

                </div>

            </div>
        </van-popup>

        <van-popup v-model="participation_flag" round position="bottom" :style="{ height: '20%' }">
            <div class="participation-popup">
                <span class="participation-cancel" @click="participation_flag = false">取消</span>
                <span class="participation-title">参与数量</span>
                <span class="participation-confirm" @click="confirm">确定</span>
            </div>
            <div style="padding: 0 .75rem;">
                <input class="participation-input" type="number" v-model="count" placeholder="请输入参与数量" />

            </div>

        </van-popup>
    </div>
</template>
<script>
import cComment from "components/goods/children/comment"; // 评论
export default {
    components: { cComment },
    data() {
        return {
            count: null,
            participation_flag: false,
            customer_flag: false,
            flow_flag: false,
            goods: {}

        }
    },
    activated() {
        this.customer_flag = false;
        this.participation_flag = false;
        this.getDetails();
    },
    methods: {
        getDetails() {
            $http.get("plugin.kaipin-laboratory.frontend.product-plaza.get-product-detail", { id: this.$route.params.id }, '').then(res => {
                if (res.result !== 1) {
                    return this.$toast(res.msg);
                }
                this.goods = res.data;
            })
        },
        FromTo() {
            this.$router.push(this.fun.getUrl("kaipin_comment", { id: this.$route.params.id }))
        },
        onClickButton() {
            if (this.goods.is_sign_up||this.goods.status >= 1||this.goods.is_full || this.goods.status==-1) return;
            this.participation_flag = true;
        },
        goto() {
            this.$router.push(this.fun.getUrl("kaipinLaboratory"))
        },
        onClickIcon() {
            this.customer_flag = true;
        },
        confirm() {
            $http.post("plugin.kaipin-laboratory.frontend.product-plaza.sign-up", { id: this.$route.params.id, number: this.count }, '').then(res => {
                if (res.result) {
                    this.participation_flag = false;
                    this.getDetails();
                }
                this.$toast(res.msg);
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.absoulte {
    position: absolute !important;
}

.pc-style{
    position: fixed;
    left: 50% !important;
    right: unset !important;
    transform:translate(-50%,-50%) !important;
    .center{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}
.w375 {
    position: relative;
    width: 375px;
}

.icon-shangpin1,
.icon-pinglun1 {
    font-size: 1rem;
}

::v-deep .van-goods-action-icon {
    color: #00001C;
}

::v-deep .van-goods-action-button--danger {
    background: #F15353;
    color: #FFFFFF;
    font-size: .875rem;
    width: 16.1875rem;
}

.customer-box {
    background-color: transparent !important;
}

.kaipin-details {
    padding-bottom: 3.875rem;

    .participation-confirm {
        font-weight: 400;
        font-size: 0.9375rem;
        color: #00001C;
        line-height: 1;
    }

    .participation-title {
        font-weight: bold;
        font-size: 0.9375rem;
        line-height: 1;
        color: #00001C;
    }

    .participation-cancel {
        font-weight: 400;
        font-size: 0.9375rem;
        color: #999999;
        line-height: 1;
    }

    .participation-input {
        display: block;
        width: 100%;
        border: 1px solid #D6D6DC;
        height: 2.75rem;
        line-height: 2.75rem;
        border-radius: .5rem;
        font-size: .875rem;
        padding: .9375rem 1rem;

    }

    .participation-popup {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 1.3438rem .8125rem 1.5938rem;
    }

    .phone-button {
        display: inline-block;
        margin: 0 auto;
        width: 10.625rem;
        height: 2.5rem;
        line-height: 2.5rem;
        background: #E2ECFE;
        color: #1961F1;
        font-size: .875rem;
        border-radius: 1.5rem 1.5rem 1.5rem 1.5rem;
        text-align: center;
    }

    .customer-popup {
        width: 15.625rem;
        height: 19.4375rem;
        background: #FFFFFF;
        border-radius: 0.9375rem 0.9375rem 0.9375rem 0.9375rem;
        border: 0.0313rem solid #707070;
        overflow: hidden;
    }

    .icon-adsystem_icon_cancle {
        font-size: 3.125rem;
        color: #D6D6DC;
    }

    .customer-popup-tips {
        font-weight: 400;
        font-size: 0.8125rem;
        color: #00001C;
        line-height: 1;
        margin: .4688rem auto .8438rem;
    }

    .icon-zx_map_tel {
        margin-right: .5rem;
        color: #1961F1;
        font-size: .875rem;
    }

    .customer-qr {
        width: 10.625rem;
        margin: 0 auto;
        height: 10.625rem;
        background: #FFFFFF;
        border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
        border: 1px solid #D6D6DC;
        padding: .2188rem;

        img {
            margin: 0;
            width: 100%;
            height: 100%;
        }
    }

    .customer-popup-title {
        text-align: center;
        margin-top: 1.0625rem;
        margin-bottom: .8438rem;
        font-weight: bold;
        font-size: 1rem;
        color: #00001C;
    }

    .wait {
        width: 1.25rem;
        height: 1.25rem;
        background: #F0F0F1;
        text-align: center;
        line-height: 1.25rem;
        color: #6E6E79;
        font-size: .8125rem;
        border-radius: 50%;
        font-weight: bold;
    }

    .number {
        font-weight: bold;
        font-size: 1.125rem;
        color: #F15353;
        line-height: 0.9375rem;
        text-align: center;
    }

    .text {
        font-weight: 400;
        font-size: 0.75rem;
        color: #6E6E79;
        margin-top: .3125rem;
        line-height: 1;
    }

    img {
        margin: 0;
        display: block;
        width: 100%;
        height: auto;
    }

    .head {
        margin: .625rem .75rem;
        background-color: #fff;
        border-radius: 0.5rem;
        padding: .75rem;
    }

    .title {
        font-weight: 500;
        font-size: 1rem;
        color: #00001C;
        margin-bottom: .4375rem;
    }

    .head-bottom {
        background-color: #FBFBFB;
        border-radius: .5rem;
        height: 7.5rem;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

    .explain {
        font-weight: 400;
        font-size: 0.8125rem;
        color: #6E6E79;
    }

    .icon-icon_more11 {
        font-size: 0.7188rem;
        color: #AAAAB3;
    }



    .flow-line {
        position: relative;
        width: 3.4375rem;
        height: 2.7813rem;

        span {
            position: absolute;
            left: 50%;
            top: .25rem;
            min-width: 2.3125rem;
            height: 1rem;
            line-height: 1rem;
            text-align: center;
            padding: 0 0.3125rem;
            transform: translate(-50%, 0);
            background: #FFFFFF;
            border-radius: 0.5313rem;
            border: 1px solid #D6D6DC;
            font-weight: 400;
            font-size: 0.6875rem;
            color: #6E6E79;
            z-index: 10;
            text-wrap: nowrap;
            box-sizing: border-box;
        }
    }

    .flow-line::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0.6563rem;
        right: 0;
        width: 100%;
        border: 0.0938rem dotted #D6D6DC;

    }

    .flow .flow-line-2 {
        margin-left: .5938rem;
        margin-right: .4375rem;
    }


    .flow-bottom-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .popup-flow {
        margin: 1.25rem 0.75rem 1.2188rem;
    }

    .icon-guanbi {
        position: absolute;
        right: .75rem;
        top: .9375rem;
        z-index: 10;
        font-size: 0.7188rem;
        width: 1.5rem;
        height: 1.5rem;
        line-height: 1.5rem;
        border-radius: 50%;
        color: #6E6E79;
        background: #F0F0F1;
    }

    .popup-flow-tips {
        font-weight: 400;
        font-size: 0.8125rem;
        line-height: 1;
        color: #6E6E79;
        text-align: left;
    }

    .popup-flow-status {
        text-align: left;
        font-weight: bold;
        font-size: 0.875rem;
        line-height: 1;
        color: #00001C;
        margin-bottom: .4688rem;
    }

    .popup-title {
        font-weight: bold;
        font-size: 1rem;
        color: #00001C;
        line-height: 1;
        text-align: left;
        margin: 1.1875rem .75rem 0;
    }

    .flow-bottom {
        display: flex;
        align-items: center;
        margin-top: 1.125rem;

        // padding-bottom: 1.1875rem;



        .flow-txt {
            margin-top: .4375rem;
            line-height: 1;
            text-align: center;
            font-weight: 400;
            font-size: 0.75rem;
            color: #00001C;
            white-space: nowrap;
        }


        .icon-icon_fail {
            width: 1.25rem;
            height: 1.25rem;
            line-height: 1.25rem;
            text-align: center;
            background: #AAAAB3;
            border-radius: 100%;
            color: #fff;
        }

        .icon-icon_select1 {
            width: 1.25rem;
            height: 1.25rem;
            line-height: 1.25rem;
            text-align: center;
            background: #23B43B;
            border-radius: 100%;
            color: #fff;
        }

        .icon-icon_close {
            width: 1.25rem;
            font-size: .65rem;
            font-weight: bold;
            height: 1.25rem;
            line-height: 1.25rem;
            text-align: center;
            background: #6E6E79;
            border-radius: 100%;
            color: #fff;
        }
    }

    .flow-head,
    .comment-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .flow {
        margin: 0.625rem .75rem;
        padding: .9375rem .75rem .8438rem .625rem;
        box-sizing: border-box;
        border-radius: 0.5rem;
        background-color: #fff;
    }

    .comment-content,
    .comment-time {
        line-height: 1;
        font-weight: 400;
        font-size: 0.75rem;
        text-align: left;
        margin-bottom: .1563rem;
        color: #7B7B7B;
    }

    .comment-item:first-child {
        margin-top: 1.0313rem;
    }

    .comment-item:last-child {
        border-bottom: unset;
        padding-bottom: 0;
    }

    .comment-item {
        display: flex;
        align-items: center;
        margin-top: .75rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid #F0F0F1;

        img {
            width: 1.75rem;
            height: 1.75rem;
            margin: 0 .5rem 0 0;
        }
    }

    .goods-details-title {
        text-align: left;
        font-weight: 500;
        font-size: 0.9375rem;
        color: #00001C;
        line-height: 1;
    }

    .flow-title,
    .comment-title {
        font-weight: 500;
        font-size: 0.9375rem;
        color: #00001C;
        line-height: 1;
    }

    .head-bottom-item {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-around;

        div {
            flex: 1;
        }
    }

    .head-bottom-item::after {
        content: "";
        position: absolute;
        left: 50%;
        width: 1px;
        height: 1.6875rem;
        background: #D6D6DC;
    }

    .comment,
    .goods-details {
        margin: 0.625rem .75rem;
        background-color: #fff;
        border-radius: 0.5rem;
        padding: .9375rem .75rem .75rem;
        box-sizing: border-box;
    }
}
</style>